<template>
  <div class="abnormal">
    <div class="title">
      {{ departmentShow == true ? '问题项目清单' : '问题消耗清零图' }}
    </div>
    <div class="content" v-if="!departmentShow">
      <div
        class="item"
        v-for="(item, index) in items"
        :key="item.id"
        ref="items"
        @mouseenter="hover(index)"
      >
        <div>{{ item.name }}</div>
        <div ref="icon" :class="item.icon"></div>
        <div>
          问题总数：<span>{{ item.alarmValue }}</span>
        </div>
        <div>
          消除问题：<span>{{ item.difficultyValue }}</span>
        </div>
        <div>
          本年项目：<span>{{ item.buildValue }}</span>
        </div>
      </div>
    </div>
    <div class="content" v-else>
      <tab
        :tableData="tableData"
        :columns="columns"
        :showSort="true"
        :operate="{ show: true, width: 150 }"
      />
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import tab from '../table/tab.vue';
import { GetAssignData, GetDeptDifficultyTotal } from '@/api/index';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { tab },
  data() {
    //这里存放数据
    return {
      items: [
        {
          icon: 'icon-tejiayushenpi icon2',
          bgimg: require('@/assets/images/6.png')
        },
        {
          icon: 'icon-hangye icon2',
          bgimg: require('@/assets/images/7.png')
        },
        {
          icon: 'icon--qiyexuanzhi icon2',
          bgimg: require('@/assets/images/8.png')
        },
        {
          icon: 'icon-xiangmu icon2',
          bgimg: require('@/assets/images/9.png')
        },
        {
          icon: 'icon-cailiaogongcheng icon2',
          bgimg: require('@/assets/images/10.png')
        },
        {
          icon: 'icon-cailiaogongcheng icon2',
          bgimg: require('@/assets/images/11.png')
        },
        {
          icon: 'icon-wenjianjia icon2',
          bgimg: require('@/assets/images/12.png')
        },
        {
          icon: 'icon-tejiayushenpi icon2',
          bgimg: require('@/assets/images/13.png')
        },
        {
          icon: 'icon-guihua icon2',
          bgimg: require('@/assets/images/14.png')
        },
        {
          icon: 'icon-xiangmu00 icon2',

          bgimg: require('@/assets/images/15.png')
        },
        {
          icon: 'icon-yuanjibie icon2',
          bgimg: require('@/assets/images/8.png')
        },
        {
          icon: 'icon-yuanjibie icon2',
          bgimg: require('@/assets/images/6.png')
        },
        {
          icon: 'icon-xiangmu00 icon2',
          bgimg: require('@/assets/images/10.png')
        },
        {
          icon: 'icon-wenjianjia icon2',
          bgimg: require('@/assets/images/14.png')
        }
      ],

      tableData: [],
      columns: columns,
      departmentShow: false
    };
  },
  //监听属性 类似于data概念
  computed: {
    monitoringItems() {
      let data = {
        itemTypeId: this.$store.state.itemTypeId,
        deptid: this.$store.state.deptid,
        departmentSwitching: this.$store.state.departmentSwitching,
        curryear: this.$store.state.curryear
      };
      return data;
    }
  },
  //监控data中的数据变化
  watch: {
    monitoringItems: {
      handler(newVal, oldVal) {
        if (oldVal !== undefined) {
          this.GetAssignData(newVal.curryear, newVal.itemTypeId, newVal.deptid);
          this.GetDeptDifficultyTotal(newVal.curryear, newVal.deptid);
          this.departmentShow = newVal.departmentSwitching;
        }
      },
      immediate: true
    }
  },
  //方法集合
  methods: {
    //预警数据
    GetDeptDifficultyTotal(curryear, deptid) {
      GetDeptDifficultyTotal({ curryear: curryear, deptid: deptid }).then(
        (res) => {
          let _index = 0;
          this.items = res.data.data.map((item) => {
            if (_index > this.items.length) {
              _index = 0;
            }
            return { ...item, ...this.items[_index++] };
          });
        }
      );
    },

    hover(index) {
      let items = this.$refs.items;
      let icons = this.$refs.icon;
      for (let i = 0; i < items.length; i++) {
        items[i].setAttribute('class', 'item');
        icons[i].style.display = 'block';
        items[i].style.backgroundImage = 'none';
      }

      items[index].setAttribute('class', 'item item_hover');
      icons[index].style.display = 'none';
      items[index].style.backgroundImage = `url(${this.items[index].bgimg})`;
    },

    //表格数据
    GetAssignData(curryear, itemTypeId, deptid) {
      GetAssignData({
        curryear: curryear,
        itemTypeId: itemTypeId,
        deptid: deptid
      }).then((res) => {
        this.tableData = res.data.data;
      });
    }
  },

  created() {
    this.GetAssignData();
    this.GetDeptDifficultyTotal();
  }, //生命周期 - 创建完成（可以访问当前this实例）

  mounted() {} //生命周期 - 挂载完成（可以访问DOM元素）
};
var columns = [
  {
    prop: 'itemName',
    label: '项目分类'
  },
  {
    prop: 'typeName',
    label: '问题分类'
  },
  {
    prop: 'difficulty',
    label: '问题描述'
  },
  {
    prop: 'proposal',
    label: '交办意见'
  },
  {
    prop: 'finishLimitDate',
    label: '截至日期'
  },
  {
    prop: 'deptName',
    label: '承办单位'
  }
];
</script>

<style scoped lang="less">
.abnormal {
  margin-top: 20px;
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
  background-color: #fff;
  position: relative;
  .title {
    font-size: 14px;
    font-weight: bold;
    margin: 10px 0 10px 20px;
    color: #000;
  }
  .title::before {
    content: '';
    position: absolute;
    width: 4px;
    height: 15px;
    background-color: #008aff;
    top: 12px;
    left: 8px;
  }
  .content {
    height: 230px;
    color: #fff;
    font-size: 12px;
    display: flex;
    overflow-y: hidden;
    overflow-x: visible;
    padding-bottom: 17px;
    .item {
      height: 200px;
      flex-shrink: 0;
      background-color: #3c3c3c;
      padding: 30px 20px 40px 20px;
      float: left;
      border-left: 1px solid #fff;
      transition: all 0.5s;
      cursor: pointer;
      div {
        margin-bottom: 15px;
      }
      span {
        font-size: 16px;
      }
    }
    .item_hover {
      background-repeat: no-repeat;
      background-position-y: top;
      background-position-x: right;
      background-size: 200px;
      background-color: #008aff;
      padding: 30px 220px 20px 40px;
      float: left;
      border: 1px solid #008aff;
    }
    .item0 {
      background: url(@/assets/images/6.png) no-repeat right;
    }
  }
}
</style>
